<template>
	<view class="page page-charge">
		<view class="logo-wrap" flex h-80px items-center justify-between c-white px-20px pt-30px pb-80px>
			<view>
				<view text-base>剩余条数</view>
				<view text-2xl mt-5px >
					<text>{{user.num}}</text>
					<text text-xs c-gray-3 v-if="user.monthExpiredNum">（{{user.monthExpiredNum}}条将于本月底到期）</text>
				</view>
				
			</view>
			<view center @click="goDetail">
				<view mr-4px>账户明细</view>	 
				<view class="icon icon-angle-right"></view>
			</view>
		</view>

		<view mt--60px class="card1">
			<uni-group mode="card">
				<view pt-10px pl-10px min-h-180>
					<uni-grid :column="2" :showBorder="false" :square="false" :highlight="false">

						<uni-grid-item v-for="(v,k) in baseInfo?.topup_package">
							<view class="item" :class="{'active': current == k}"  @click="choose(k)">
								<view text-base>{{v.name}}</view>
								<view text-sm :class="`${current == k? 'c-gray-1':'c-gray-5'}`">有效期：{{v.ageing_name}}</view>
								<view text-base>价格：{{v.money}} 元</view>
							</view>
						</uni-grid-item>

					</uni-grid>
				</view>
			</uni-group>
		</view>

		<view p-20px c-gray-4>温馨提示：如需咨询充值相关的信息，请<text underline @click="consult()">联系在线客服</text> </view>
		<view class="pay-btn" @click="pay">立即支付</view>
	</view>


</template>

<script setup>
	import api from '@/api'
	import { ref } from 'vue'
	import { useUserStore, useBaseStore } from '@/stores/user'
	import { consult } from '@/common/utils'

	const user = useUserStore()
	const { baseInfo } = useBaseStore()

	const current = ref(0)
	const choose = k => {
		current.value = k
	}

	const goDetail = () => {
		uni.navigateTo({
			url: `/pages/charge/list`
		})
	}

	const pay = async () => {
		const wxpay_data = await api.wxpay2({package_name: baseInfo.topup_package[current.value].name})
		const { errMsg } = await uni.requestPayment(wxpay_data);
		if(errMsg.includes("requestPayment:ok")) {
			uni.showToast({
				icon: 'none',
				title: '充值成功'
			})
			user.updateNum()
		}
	}

</script>

<style lang="scss">
.page-charge {
	.uni-group__content {
		padding: 0;
	}
		// 页面顶部蓝色弧低
	.logo-wrap {
		background: linear-gradient(to bottom, $uni-color-navigator 60%, $uni-color-blue);
	}

	.card1 {
		position: relative;
		color: $uni-text-color;
		min-height: 150upx;
		.item {
			background: #eee;
			border-radius: 6px;
			margin: 0 10px 10px 0;
			padding: 10px;
			&.active {
				background: $uni-color-navigator;
				color: white;
			}
		}
	}

	.pay-btn {
		background: linear-gradient(to right bottom, $uni-color-navigator 40%, $uni-color-blue);
		color: wheat;
		width: 80vw;
		margin: 30px auto 0;
		text-align: center;
		padding: 12px 0;
		font-size: 16px;
		border-radius: 100px;
	}

}
</style>

